<template>
  <!-- 选择器 -->
  <div class="pho-form-item" :style="newStyle">
    <van-field
      v-bind="$attrs"
      :value="text"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      input-align="right"
      theme="round"
      :clickable="!$attrs.onlyShow"
      is-link
      readonly
      @click="onClick"
    >
      <TextShow
        slot="input"
        style="padding:0"
        v-if="$attrs.onlyShow"
        :value="$utils.getOptionsText(value,resData,props)"
      />
      <span v-if="showLabel" slot="label" :style="newStyle.font">{{$attrs.label}}</span>
      <template #right-icon v-if="clearable">
        <div @click.stop="handleClear">
          <van-icon name="clear" />
        </div>
      </template>
    </van-field>
    <van-popup v-model="showPicker" position="bottom" get-container="body">
      <van-picker
        v-if="!$attrs.multiple"
        show-toolbar
        :columns="options"
        @confirm="handleConfirm"
        @cancel="showPicker = false"
      />
      <template v-else>
        <div class="van-picker__toolbar">
          <button class="van-picker__cancel" @click="showPicker = false">取消</button>
          <button class="van-picker__confirm" @click="handleConfirm({value:checks.join(',')})">确定</button>
        </div>
        <van-checkbox-group v-model="checks">
          <van-cell
            v-for="(item,i) in options"
            clickable
            :key="i"
            :title="item.text"
            @click="toggle(i)"
          >
            <template #right-icon>
              <van-checkbox :name="item.value" ref="checkboxes" />
            </template>
          </van-cell>
        </van-checkbox-group>
      </template>
    </van-popup>
  </div>
</template>

<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-select",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: [Number, String],
      default: "",
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showPicker: false,
      checks: [],
    };
  },
  computed: {
    // 选择器选项
    options() {
      let opts = this.resData;
      console.log("opts",JSON.stringify(opts))
      return opts.map((item) => {
        return { text: item[this.props.label], value: item[this.props.value] };
      });
    },
    // 显示的文字
    text() {
      const arr = this.value.split(",") || [];
      return this.options
        .filter((item) => arr.includes(item.value))
        .map((item) => item.text)
        .join(",");
    },
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },

    onClick() {
      if (this.$attrs.disabled || this.$attrs.readonly || this.$attrs.onlyShow)
        return;
      this.checks = this.value ? this.value.split(",") : [];

      this.showPicker = true;
    },
    submit() {
      const value = this.checks ? this.checks.join(",") : "";
      this.handleConfirm(value);
    },
    handleClear() {
      this.$emit("update", "");
      this.$emit("clear");
      this.onClear;
    },
    // 确认选中
    handleConfirm(value) {
      this.$emit("update", value.value);
      this.$emit("change", value.value);
      this.onChange(value.value);
      this.$emit("confirm", value.value);
      this.showPicker = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
